<template>
  <div class="exam-questions-upload">
    <div class="section-header">
      <h3>笔试题库上传</h3>
      <p class="section-desc">上传笔试题目文件，关联公司、技术领域和岗位</p>
    </div>

    <div class="upload-form">
      <a-form :model="formState" layout="vertical">
        <a-form-item
          label="所属公司"
          name="companyId"
          :rules="[{ required: true, message: '请选择所属公司' }]"
        >
          <a-select v-model:value="formState.companyId" placeholder="请选择所属公司">
            <a-select-option v-for="company in companies" :key="company.id" :value="company.id">
              {{ company.companyName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="技术领域"
          name="techField"
          :rules="[{ required: true, message: '请选择技术领域' }]"
        >
          <a-select v-model:value="formState.techField" placeholder="请选择技术领域">
            <a-select-option v-for="field in techFields" :key="field.id" :value="field.id">
              {{ field.techName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="关联岗位"
          name="positionId"
          :rules="[{ required: true, message: '请选择关联岗位' }]"
        >
          <a-select
            v-model:value="formState.positionId"
            placeholder="请选择关联岗位"
            :options="filteredPositions"
          ></a-select>
        </a-form-item>

        <a-form-item
          label="上传题库文件"
          name="fileList"
          :rules="[{ required: true, message: '请上传题库文件' }]"
        >
          <a-upload-dragger
            v-model:fileList="fileList"
            name="file"
            :multiple="false"
            :before-upload="beforeUpload"
            accept=".txt"
          >
            <p class="ant-upload-drag-icon">
              <inbox-outlined />
            </p>
            <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
            <p class="ant-upload-hint">支持单个.txt格式文件，请确保文件格式正确</p>
          </a-upload-dragger>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="handleSubmit">提交</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </div>

    <a-divider orientation="left">已添加题库</a-divider>

    <a-table
      :columns="columns"
      :data-source="examBanks"
      :pagination="{ pageSize: 5 }"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'companyName'">
          {{ getCompanyName(record.companyId) }}
        </template>
        <template v-if="column.key === 'techField'">
          {{ getTechFieldName(record.techField) }}
        </template>
        <template v-if="column.key === 'positionName'">
          {{ getPositionName(record.positionId) }}
        </template>
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link" size="small" @click="downloadExamBank(record)">下载</a-button>
            <a-button type="link" danger size="small" @click="deleteExamBank(record)"
              >删除</a-button
            >
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { message } from 'ant-design-vue'
import { InboxOutlined } from '@ant-design/icons-vue'

// 表单数据
const formState = reactive({
  companyId: undefined,
  techField: undefined,
  positionId: undefined,
})

// 文件上传
const fileList = ref([])

// 公司数据
const companies = ref([
  { id: '1', companyName: '阿里巴巴' },
  { id: '2', companyName: '腾讯' },
  { id: '3', companyName: '百度' },
  { id: '4', companyName: '字节跳动' },
  { id: '5', companyName: '华为' },
])

// 技术领域数据
const techFields = ref([
  { id: '1', techName: 'React' },
  { id: '2', techName: 'Spring Boot' },
  { id: '3', techName: 'TensorFlow' },
  { id: '4', techName: 'Flutter' },
  { id: '5', techName: 'Node.js' },
  { id: '6', techName: 'Vue.js' },
  { id: '7', techName: 'Python' },
  { id: '8', techName: 'Java' },
])

// 岗位数据
const positions = ref([
  {
    id: '1',
    positionName: '前端开发工程师',
    companyId: '1',
    techRequirements: ['1', '5', '6'],
  },
  {
    id: '2',
    positionName: 'Java后端开发',
    companyId: '2',
    techRequirements: ['2', '8'],
  },
  {
    id: '3',
    positionName: '人工智能研究员',
    companyId: '3',
    techRequirements: ['3', '7'],
  },
  {
    id: '4',
    positionName: '移动开发工程师',
    companyId: '4',
    techRequirements: ['4'],
  },
  {
    id: '5',
    positionName: '全栈开发工程师',
    companyId: '5',
    techRequirements: ['1', '2', '5', '6', '8'],
  },
])

// 根据所选公司和技术领域筛选岗位
const filteredPositions = computed(() => {
  if (!formState.companyId && !formState.techField) return []

  return positions.value
    .filter((position) => {
      const companyMatch = !formState.companyId || position.companyId === formState.companyId
      const techMatch =
        !formState.techField || position.techRequirements.includes(formState.techField)
      return companyMatch && techMatch
    })
    .map((position) => ({
      label: position.positionName,
      value: position.id,
    }))
})

// 表格数据
const tableLoading = ref(false)
const examBanks = ref([
  {
    id: '1',
    companyId: '1',
    techField: '1',
    positionId: '1',
    fileName: 'React前端开发题库.txt',
    uploadTime: '2023-05-10 14:30:25',
  },
  {
    id: '2',
    companyId: '2',
    techField: '2',
    positionId: '2',
    fileName: 'Java后端开发题库.txt',
    uploadTime: '2023-05-12 09:15:38',
  },
  {
    id: '3',
    companyId: '3',
    techField: '7',
    positionId: '3',
    fileName: 'Python人工智能题库.txt',
    uploadTime: '2023-05-15 16:45:12',
  },
])

// 表格列定义
const columns = [
  {
    title: '所属公司',
    dataIndex: 'companyId',
    key: 'companyName',
  },
  {
    title: '技术领域',
    dataIndex: 'techField',
    key: 'techField',
  },
  {
    title: '关联岗位',
    dataIndex: 'positionId',
    key: 'positionName',
  },
  {
    title: '文件名称',
    dataIndex: 'fileName',
    key: 'fileName',
  },
  {
    title: '上传时间',
    dataIndex: 'uploadTime',
    key: 'uploadTime',
  },
  {
    title: '操作',
    key: 'action',
    width: '150px',
  },
]

// 获取公司名称
const getCompanyName = (companyId) => {
  const company = companies.value.find((company) => company.id === companyId)
  return company ? company.companyName : companyId
}

// 获取技术领域名称
const getTechFieldName = (id) => {
  const field = techFields.value.find((field) => field.id === id)
  return field ? field.techName : id
}

// 获取岗位名称
const getPositionName = (id) => {
  const position = positions.value.find((position) => position.id === id)
  return position ? position.positionName : id
}

// 文件上传前验证
const beforeUpload = (file) => {
  const isTxt = file.type === 'text/plain'
  if (!isTxt) {
    message.error('只能上传TXT格式的文件!')
  }
  return isTxt || false
}

// 下载题库
const downloadExamBank = (record) => {
  message.success(`开始下载题库：${record.fileName}`)
  // 这里应该是实际的下载逻辑
}

// 删除题库
const deleteExamBank = (record) => {
  examBanks.value = examBanks.value.filter((item) => item.id !== record.id)
  message.success('题库删除成功')
}

// 提交表单
const handleSubmit = () => {
  if (fileList.value.length === 0) {
    message.error('请上传题库文件')
    return
  }

  // 这里应该是调用API提交表单
  message.success('题库上传成功')

  // 添加到表格中
  const file = fileList.value[0]
  const newExamBank = {
    id: Date.now().toString(),
    companyId: formState.companyId,
    techField: formState.techField,
    positionId: formState.positionId,
    fileName: file.name,
    uploadTime: new Date().toLocaleString(),
  }

  examBanks.value.unshift(newExamBank)
  resetForm()
}

// 重置表单
const resetForm = () => {
  formState.companyId = undefined
  formState.techField = undefined
  formState.positionId = undefined
  fileList.value = []
}

// 监听公司和技术领域变化，重置岗位选择
watch([() => formState.companyId, () => formState.techField], () => {
  formState.positionId = undefined
})
</script>

<style scoped>
.exam-questions-upload {
  padding: 0;
}

.section-header {
  margin-bottom: 24px;
}

.section-desc {
  color: rgba(0, 0, 0, 0.45);
  margin-top: 8px;
}
</style> 